<template>
  <van-popup
    v-model="show"
    position="left"
    :style="{ width: '75%' }"
    @click-overlay="childShow"
    class="accountPopup"
  >
    <van-nav-bar class="head" v-if="this.userInfo">
      <div slot="left">
        <div class="userhead">
          <img :src="this.userInfo.avatarUrl" alt="" />
        </div>
      </div>
      <span slot="title" @click="$router.push('/PersonalDetails')">
        {{ this.userInfo.nickname }}
      </span>
    </van-nav-bar>
    <van-nav-bar class="head" v-else>
      <div slot="left" @click="tiao">
        <van-icon
          name="https://b.yzcdn.cn/vant/icon-demo-1126.png"
          class="usericon"
        />
        <span @click="tiao">立即登录 ></span>
      </div>
    </van-nav-bar>
    <div class="news">
      <div class="messagecenter">
        <van-icon name="comment-circle-o" class="news-icon" />
        <span @click="tonews">消息中心</span>
        <van-icon name="arrow" />
      </div>
      <div class="yunbeicenter">
        <van-icon name="smile-o" class="news-icon" />
        <span>云贝中心</span>
        <van-icon name="arrow" />
      </div>
      <div class="creatorcenter" v-if="this.userInfo">
        <van-icon name="friends-o" class="news-icon" />
        <span>创作者中心</span>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="services">
      <span class="music">音乐服务</span>
      <div>
        <van-icon name="coupon-o" class="news-icon" />
        <span>演出</span>
        <van-icon name="arrow" />
      </div>
      <div>
        <van-icon name="shopping-cart-o" class="news-icon" />
        <span>商城</span>
        <van-icon name="arrow" />
      </div>
      <div>
        <van-icon name="phone-o" class="news-icon" />
        <span>口袋彩铃</span>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="services">
      <span class="music">其他</span>
      <div @click="upShow">
        <van-icon name="setting-o" class="news-icon" />
        <span>设置</span>
        <van-icon name="arrow" />
      </div>
      <div>
        <van-icon name="eye" class="news-icon" />
        <span>夜间模式</span>
        <van-icon name="arrow" />
      </div>
      <div @click="ding">
        <van-icon name="clock-o" class="news-icon"  />
        <span>定时关闭</span>
        <van-icon name="arrow" />
      </div>
      <div>
        <van-icon name="closed-eye" class="news-icon" />
        <span>音乐黑名单</span>
        <van-icon name="arrow" />
      </div>
      <div>
        <van-icon name="gem-o" class="news-icon" />
        <span>个性装扮</span>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="news">
      <div class="messagecenter">
        <van-icon name="service-o" class="news-icon" />
        <span>我的客服</span>
        <van-icon name="arrow" />
      </div>
      <div class="yunbeicenter">
        <van-icon name="orders-o" class="news-icon" />
        <span>我的订单</span>
        <van-icon name="arrow" />
      </div>
      <div class="creatorcenter">
        <van-icon name="share-o" class="news-icon" />
        <span>分享网易云</span>
        <van-icon name="arrow" />
      </div>
      <div class="creatorcenter">
        <van-icon name="info-o" class="news-icon" />
        <span>关于</span>
        <van-icon name="arrow" />
      </div>
    </div>
    <van-button
      class="logoutbtn"
      type="default"
      v-if="this.userInfo"
      @click="logout"
      >退出登录</van-button
    >
  </van-popup>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      setupShow: false
    }
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  created () {},
  mounted () {},
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    childShow () {
      this.$emit('update:show', false)
    },
    tiao () {
      this.$router.push('/Login')
    },
    upShow () {
      this.setupShow = true
      this.$emit('upshow', this.setupShow)
    },
    tonews () {
      this.$router.push('/MyNews')
    },
    logout () {
      this.$store.commit('logout')
      this.$store.commit('outuser', null)
    },
    ding () {
      this.$emit('dingshow', true)
    }
  }
}
</script>

<style scoped lang="less">
.accountPopup {
  background: #f7f7f7;
  padding: 10px;
  .head {
    background: #f7f7f7;
    .usericon {
      font-size: 60px;
      vertical-align: middle;
      border-radius: 50%;
      background: #f3dadd;
      color: #f5f1f2;
    }
    .userhead {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: 1px solid #999;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    span {
      line-height: 100px;
      font-weight: bold;
    }
  }
  .news {
    background: white;
    padding: 10px;
    border-radius: 15px;
    div {
      font-size: 30px;
      line-height: 80px;
      padding: 10px;
    }
    .messagecenter {
      border-bottom: 1px solid #f3f3f3;
    }
    .yunbeicenter {
      border-bottom: 1px solid #f3f3f3;
    }
  }
  .news-icon {
    font-size: 44px;
    margin-right: 20px;
    vertical-align: middle;
  }
  .services {
    background: white;
    margin: 20px 0;
    // padding: 10px;
    border-radius: 15px;
    .music {
      padding: 0px 40px;
      font-size: 24px;
      display: block;
      line-height: 70px;
      color: #999;
      border-bottom: 1px solid #f3f3f3;
    }
    div {
      padding: 10px;
      font-size: 30px;
      line-height: 80px;
      // line-height: 80px;
    }
  }
  .logoutbtn {
    color: red;
    font-weight: 600;
    margin-top: 10px;
    border-radius: 15px;
    width: 100%;
  }
}
</style>
